<template>
    <div class="address">
        <vue-header title="收货地址管理" :left-options="{backText: ''}">

        </vue-header>
        <div class="address-content">
            <div class="address-content-list">
                <div class="address-content-items" v-for="item in items">
                    <div class="address-content-items-flex">
                        <div class="address-content-items-flex-left">
                            <span class="address-content-items-flex-left-name">{{item.name}}</span>
                        </div>
                        <div class="address-content-items-flex-right">
                            <span class="address-content-items-flex-left-phone">{{item.phone}}</span>
                        </div>
                    </div>
                    <div class="address-content-items-address">
                        {{item.provinceName}}  {{item.cityName}} {{item.countyName}} {{item.addressDetail}}
                    </div>
                    <div class="address-content-items-flex address-content-items-flex-option">
                        <div class="address-content-items-flex-left">
                            <check-icon :value.sync="item.isMain?!value:value" @click="setAddress(item.id)">默认地址</check-icon>
                
                        </div>
                        <div class="address-content-items-flex-right">
                            <span class="address-content-items-flex-right-edit"  @click="editAddress(item.id,item.isMain)"><img src="../../assets/images/address_edit_icon.png" />
                                <span>编辑</span>
                            </span>
                            <span class="address-content-items-flex-right-delete" @click="deleteAddress(item.id)"><img src="../../assets/images/address_del_icon.png" />
                                <span >删除</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="address-content-btu">
                    <div class="address-content-btu-defu" @click="goPage()">添加收货地址</div>
                </div>
            </div>
        </div>

      <confirm v-model="show"
      :title="111"
      @on-confirm="onConfirm"
        <p style="text-align:center;">1111</p>
      </confirm>

    </div>
</template>
<script>
import CheckIcon from "@/components/check-icon/index";
import vueHeader from "@/components/vue-header/index";
import store from "@/store";
import { token_expires } from "@/utils/Keyword";
import { mapGetters } from "vuex";
import { deleteAdd } from "@/api/addressList";
import { Confirm  } from "vux";


export default {
  components: {
    vueHeader,
    CheckIcon,
    Confirm
  },
  data() {
    return {
      show:false,
      value: true
    };
  },
  computed:{
     ...mapGetters({
        items: "addressList"
    }),
     items(){
      return this.$store.getters.addressList.addresses;
    }
  },
  mounted() {
    this.getaddress();
  },
  methods:{
      goPage(){
          this.$router.push({ path: '/addressAddOrEdit' })
      },
      getaddress(){  //地址列表
        var params = {
            pf: "web",
            bid: "yw",
            uid: 107192,
          };

          store.dispatch("ADDRESSLIST", params).then(res => {
             if (res == token_expires) {
                this.getaddress();
              }else{
                this.$vux.loading.hide();
        
              }
          });
      },
      editAddress(id,isMain){  //地址编辑
       this.navigation_push("addressAddOrEdit",{addressid: id,isMain:isMain})
        // this.$router.push({ path: '/addressAddOrEdit' ,query: {addressid: id}})
      },

      deleteAddress(id){  //地址删除

        this.show=true;
      


       
      },onConfirm(){
         var params={
			        id:id,
				      uid:107192,
					   	bid:"yw"
				    };
       deleteAdd(params).then(res => {
          console.log(res);
          this.navigation_push("address")
        });
      }

  }
};
</script>
<style lang="scss" >
.address {
  background-color: #f0f0f0;
  height: 100%;
  .address-content {
    height: calc(100vh - 46px);
    overflow: auto;
    .address-content-items-flex-option {
      padding: 0.2267rem 0 0;
    }
    .address-content-items {
      padding: 0.4267rem 0.3067rem 0.2267rem;
      background-color: white;
      margin-top: 0.32rem;
    }
    .address-content-items-address {
      margin-top: 0.3867rem;
      font-size: 0.3467rem;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding-bottom: 0.44rem;
      border-bottom: 1px solid #e6e6e6;
    }
    .address-content-items-flex {
      display: flex;
      .address-content-items-flex-left {
        flex: 1;
        .address-content-items-flex-left-name {
          font-size: 0.4267rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
      }
      .address-content-items-flex-right {
        .address-content-items-flex-right-edit {
          font-size: 0.3467rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          display: inline-flex;
          align-items: center;
          img {
            width: 0.44rem;
            height: 0.4933rem;
          }
          span {
            margin-left: 0.16rem;
          }
        }
        .address-content-items-flex-right-delete {
          font-size: 0.3467rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          display: inline-flex;
          align-items: center;
          margin-inline-start: 0.6933rem;
          img {
            width: 0.44rem;
            height: 0.4933rem;
          }
          span {
            margin-left: 0.16rem;
          }
        }
        .address-content-items-flex-left-phone {
          font-size: 0.4267rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }
}

</style>
